<html>

<head>
    <meta charset="utf-8" />
    <title>Data Service</title>

    <!-- import Vue.js -->
    <!--  <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script> -->
    <script src="../libs/vue.js"></script>
    <!-- import stylesheet -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/view-design/4.7.0/styles/iview.css" />
    <!-- import iView -->
    <script src="../libs/iview.js"></script>
    <script src="../common/utils.js"></script>

    <link rel="stylesheet/less" type="text/css" href="asset/styles.less" />
    <!-- <script src="https://cdn.jsdelivr.net/npm/less"></script> -->
    <script src="../libs/less.js"></script>

    <!-- Include the Codemirror library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-codemirror@4.0.0/dist/vue-codemirror.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/mode/javascript/javascript.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/mode/sql/sql.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/selection/active-line.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/theme/monokai.min.css" rel="stylesheet" />

    <link rel="icon" type="image/x-icon" href="asset/favicon.ico" />
    <script>
        window.API_ROOT = 'http://localhost:8080/adp';
    </script>
</head>

<body>
    <!-- 数据源 -->
    <div w3-include-html="../common/data-source/data-source.html"></div>
    <link href="../common/data-source/data-source.css" rel="stylesheet" />
    <script src="../common/data-source/data-source.js"></script>

    <div w3-include-html="../common/table-selector/table-selector.htm"></div>
    <!-- <link href="../common/table-selector/table-selector.css" rel="stylesheet" /> -->
    <script src="../common/table-selector/table-selector.js"></script>


    <div class="data-service">
        <nav>
            <div style="float:right;">
                数据源：<span>{{dataSource.name}}</span> | <a href="https://framework.ajaxjs.com" target="_blank">帮助</a> |
                <a @click="showAbout">关于</a>
            </div>
            <img src="asset/icon.png" width="16" style="vertical-align: middle;" /> 数据服务 Data Service
        </nav>
        <Split v-model="split1" style="border-top: 1px solid lightgray;">
            <div slot="left" class="split-pane-left">
                <div class="search-panel ">
                    <i-Input suffix="ios-search" placeholder="搜索数据服务……" style="width: 90%" />
                </div>

                <!--                <i-Select v-model="datasource.id" style="margin: 15px 8px;width: 91%;" placeholder="请选择数据源">
                    <Option v-for="item in datasource.list" :key="item.id" :value="item.id">{{ item.name }}</Option>
                </i-Select> -->
                <div style="height: 93%;overflow-y: auto;">
                    <Tree :data="project.treeData" :load-data="loadTreeData" style="margin-left: 10px;"
                        @on-contextmenu="handleContextMenu">
                        <template slot="contextMenu">
                            <Dropdown-Item @click.native="handleContextMenuCreate"
                                style="color:green">新建项目</Dropdown-Item>
                            <Dropdown-Item @click.native="handleContextMenuEdit">编辑项目</Dropdown-Item>
                            <Dropdown-Item @click.native="handleContextMenuDelete"
                                style="color: #ed4014">删除项目</Dropdown-Item>
                        </template>
                    </Tree>

                    <!--  <Tree :data="treeData" style="margin-left: 10px;"></Tree> -->
                </div>
            </div>
            <div slot="right" class="split-pane-right">

                <ul class="toolbar">
                    <li style="float:right" @click="refreshConfig">
                        <div>
                            <div class="icon">
                                <Icon type="md-refresh" size="25" style="color:darkcyan" />
                            </div>
                            <span class="text">
                                刷新配置
                            </span>
                        </div>
                    </li>
                    <li style="float:right" @click="dataSource.isShowDataSource=true">
                        <div>
                            <div class="icon">
                                <Icon type="md-swap" size="25" style="color:blueviolet" />
                            </div>
                            <span class="text">
                                数据源
                            </span>
                        </div>
                    </li>
                    <li @click="isShowSelectTable=true">
                        <div>
                            <div class="icon">
                                <Icon type="md-add" size="25" style="color:green" />
                            </div>
                            <span class="text">
                                新建服务
                            </span>
                        </div>
                    </li>
                    <li>
                        <div>
                            <div class="icon">
                                <Icon type="md-close" size="25" style="color:red" />
                            </div>
                            <span class="text">
                                删除
                            </span>
                        </div>
                    </li>
                    <li>
                        <div>
                            <div class="icon">
                                <Icon type="ios-add" size="25" style="color:cadetblue" />
                            </div>
                            <span class="text">
                                新建命令
                            </span>
                        </div>
                    </li>
                    <li @click="saveDML">
                        <div>
                            <div class="icon">
                                <Icon type="ios-create" size="25" style="color:#f90" />
                            </div>
                            <span class="text">
                                保存
                            </span>
                        </div>
                    </li>
                </ul>
                <div class="content">
                    <Tabs class="mainTab" name="mainTab" :value="activeTab" :animated="false" type="card"
                        @on-click="ifAdd">
                        <tab-pane label="首页" name="index" index="a" :closable="true" tab="mainTab"
                            style="padding: 0 10px">
                            <h1>
                                Welcome to DataService
                            </h1>
                        </tab-pane>
                        <tab-pane v-for="tab in mainTabs" :key="tab.label" :label="tab.label" :name="tab.name"
                            :index="tab.index" :closable="tab.closable" tab="mainTab" style="padding: 0 10px;">
                            <!--服务配置-->
                            <ul class="line-layout">
                                <li>
                                    <!--         <i-Select v-model="datasource.id" placeholder="请选择数据源">
                                        <Option v-for="item in datasource.list" :key="item.id" :value="item.id">{{
                                            item.name }}</Option>
                                    </i-Select> -->
                                </li>
                                <li>
                                    <i-input ref="inputName" placeholder="必填的" v-model="currentData.name">
                                        <span slot="prepend">命令名称</span>
                                    </i-input>
                                </li>
                                <li>
                                    <i-input ref="inputName" placeholder="实体的 URL 目录，必填的" v-model="currentData.urlDir">
                                        <span slot="prepend">URL 目录</span>
                                    </i-input>
                                </li>
                                <li style="padding-top: 5px;">
                                    数据源： {{currentData.datasourceName}}
                                </li>
                                <li style="padding-top: 5px;">
                                    数据库表名： {{currentData.tableName}}
                                </li>

                            </ul>
                            <fieldset>
                                <legend>更多设置
                                    <Icon type="ios-arrow-down" style="cursor: pointer;" @click="togglePanel" />
                                </legend>
                            </fieldset>
                            <div class="config" style="height:300px">
                                <Row type="flex" justify="center" align="middle">
                                    <i-Col span="10" style="padding-right:20px;">
                                        <i-input placeholder="不填则按照项目的设置。以 http://…… 开头" v-model="currentData.urlRoot">
                                            <span slot="prepend">API 地址前缀</span>
                                        </i-input>
                                        <br />
                                        <i-input placeholder="逗号隔开多个标签" v-model="currentData.tags">
                                            <span slot="prepend">标签</span>
                                        </i-input>
                                    </i-Col>
                                    <i-Col span="14">
                                        <i-input v-model="currentData.content" maxlength="200" show-word-limit
                                            type="textarea" :rows="4" placeholder="描述" />
                                    </i-Col>
                                </Row>

                                <!--       <FormItem label="主键生成策略：" prop="keyGen">
                                        <Select v-model="table.keyGen">
                                            <Option :value="3">UUID</Option>
                                            <Option :value="1">自增</Option>
                                            <Option :value="2">雪花</Option>
                                        </Select>
                                    </FormItem> -->
                                <br />
                                <Divider style="color:gray" size="small">通用字段/参数映射 Mapping</Divider>
                                <br />
                                <Row type="flex" justify="center" align="middle" :gutter="16">
                                    <i-Col span="8">
                                        <i-input placeholder="不填写则默认为 id" v-model="table.fieldsMapping.id">
                                            <span slot="prepend">唯一主键</span>
                                        </i-input>
                                    </i-Col>
                                    <i-Col span="8">
                                        <i-input placeholder="不填写则默认为 createDate" v-model="table.fieldsMapping.createDate">
                                            <span slot="prepend">创建日期字段</span>
                                        </i-input>
                                    </i-Col>
                                    <i-Col span="8">
                                        <i-input placeholder="不填写则默认为 updateDate" v-model="table.fieldsMapping.updateDate">
                                            <span slot="prepend">修改日期字段</span>
                                        </i-input>
                                    </i-Col>
                                </Row>
                                <br />
                                <Row type="flex" justify="center" align="middle" :gutter="16">
                                    <i-Col span="8">
                                        <i-input placeholder="不填写则默认为 id" v-model="table.fieldsMapping.id">
                                            <span slot="prepend">唯一主键</span>
                                        </i-input>
                                    </i-Col>
                                    <i-Col span="8">
                                        <i-input placeholder="不填写则默认为 createDate" v-model="table.fieldsMapping.createDate">
                                            <span slot="prepend">创建日期字段</span>
                                        </i-input>
                                    </i-Col>
                                    <i-Col span="8">
                                        <a>复制项目设置</a>
                                    </i-Col>
                                </Row>

              <!--                   <FormItem label="唯一主键" prop="idField">
                                    <i-input v-model="currentData.fieldsMapping.id" type="text" placeholder="不填写则默认为 id"
                                        style="width:260px;" />
                                    <a @click="showFields=true; toField = 'id'" style="float:right">选择字段
                                        &nbsp;&nbsp;</a>
                                </FormItem> -->
         <!--                        <FormItem label="创建日期的字段" prop="idField">
                                    <i-input v-model="table.fieldsMapping.createDate" type="text"
                                        placeholder="不填写则默认为 createDate" style="width:260px;"
                                        :disabled="!allDml.create.autoDate" />
                                    <a @click="showFields=true; toField = 'createDate'" style="float:right"
                                        :disabled="!allDml.create.autoDate">选择字段 &nbsp;&nbsp;</a>
                                </FormItem> -->

<!--                                 <FormItem label="修改日期的字段" prop="idField">
                                    <i-input v-model="table.fieldsMapping.updateDate" type="text"
                                        placeholder="不填写则默认为 updateDate" style="width:260px;"
                                        :disabled="!allDml.create.autoDate" />
                                    <a @click="showFields=true; toField = 'updateDate'" style="float:right"
                                        :disabled="!allDml.create.autoDate">选择字段 &nbsp;&nbsp;</a>
                                </FormItem> -->
                                <!--             <FormItem label="UUID 的字段" prop="idField">
                                        <i-input v-model="table.fieldsMapping.uuid" type="text"
                                            placeholder="不填写则默认为 uid" style="width:260px;"
                                            :disabled="!allDml.create.addUuid" />
                                        <a @click="showFields=true; toField = 'uuid'" :disabled="!allDml.create.addUuid"
                                            style="float:right">选择字段 &nbsp;&nbsp;</a>
                                    </FormItem> -->

                                <!--     <FormItem label="生成 UUID 算法" prop="idField">
                                      <Select style="width:260px;" :disabled="!allDml.create.addUuid">
                                        <Option>GUID</Option>
                                        <Option>雪花算法</Option>
                                      </Select>
                                    </FormItem> -->


<!-- 
                                <FormItem label="逻辑删除的状态" prop="idField">
                                    <i-input v-model="table.fieldsMapping.delStatus" type="text"
                                        placeholder="不填写则默认为 stat" style="width:260px;"
                                        :disabled="allDml.delete.isPhysicallyDelete" />
                                    <a @click="showFields=true; toField = 'delStatus'" style="float:right"
                                        :disabled="allDml.delete.isPhysicallyDelete">选择字段 &nbsp;&nbsp;</a>
                                </FormItem> -->

                                <!-- <FormItem label="分类标签" prop="tags">
                                      <TagsPicker />
                                    </FormItem> -->

                                <Modal v-model="showFields" title="选择字段" cancel-text="" width="370">
                                    <ul class="showFieldsList">
                                        <li v-for="(v, k) in fields" :key="k">
                                            <label>
                                                <div class="fieldsComments">{{table.fieldsComments[k]}}</div> <a
                                                    @click="table.fieldsMapping[toField] = k; showFields = false;">{{k}}</a>
                                            </label>
                                        </li>
                                    </ul>
                                </Modal>


                                <div style="margin-top: 15px;text-align: right;color:lightgray;">
                                    id#{{currentData.id}} 创建人： admin 创建日期：{{currentData.createDate}} 修改人： admin 修改日期
                                    {{currentData.updateDate}}
                                </div>
                            </div>

                            <div class="main-edit-panel">
                                <ul class="command-list">
                                    <li v-for="(item, k, index) in currentData.data" :key="index" v-if="k != 'others'"
                                        v-html="getDml(item, k)" :class="{selected: dmlSelected == index}"
                                        @click="selectItem(item, index, k)">
                                    </li>

                                    <li v-for="(item, k, index) in currentData.others" :key="index"
                                        v-html="getDml(item, k)" :class="{selected: dmlSelected == index}"
                                        @click="selectItem(item, index, k)">
                                    </li>
                                    <!--                           <li>
                                        GET /foo
                                    </li>
                                    <li>
                                        POST /foo
                                    </li>
                                    <li>
                                        GET /foo
                                    </li>
                                    <li>
                                        POST /foo
                                    </li>
                                    <li>
                                        GET /foo
                                    </li> -->
                                    <li>
                                        + 新建命令
                                    </li>

                                </ul>
                                <div class="code-panel">
                                    <!-- SQL 源码编辑器-->
                                    <codemirror class="code-editor" ref="cm" v-model="code" :options="cmOption">
                                    </codemirror>
                                    <!-- {{currentType}}----
                                    {{currentDML}}--------- -->

                                    <div>
                                        <span style="float: right;"><label><input type="checkbox"
                                                    v-model="currentDML.enable" /> 启用</label></span>
                                        命令名称 <i-input type="text" placeholder="自定义命令必填" style="width:200px"
                                            size="small"></i-input>
                                        <br />
                                        <br />

                                        <span v-if="currentType == 'create'">
                                            <label>
                                                <input type="checkbox" :value="true" /> 生成唯一 uid
                                                <tips text="唯一 id，通过 uuid 生成不重复 id"></tips>
                                            </label>
                                            &nbsp;&nbsp;&nbsp;
                                            <label>
                                                <input type="checkbox" :value="true" /> 插入创建/修改日期
                                            </label>
                                        </span>

                                        <div style="float:right">
                                            <span v-if="currentType == 'create'">
                                                <a>生成创建语句</a> |
                                            </span>
                                            <span v-if="currentType == 'delete'">
                                                <a>生成删除语句</a> |
                                                <!-- <a>生成“物理删除”语句</a> |
                                                <a>生成“逻辑删除”语句</a> -->
                                                <!--  <tips text="在逻辑上数据是被删除的，但数据本身依然存在库中（仅仅是更新状态字段为已删除）"></tips> | -->
                                            </span>

                                            <a href="javascript:alert('暂未实现')">格式化</a> |
                                            <a @click="copySql">复制</a>
                                        </div>

                                        命令类型
                                        <Radio-Group type="button">
                                            <Radio label="单个查询" title="查询单笔记录，通常返回一个记录的详细信息（info）。"></Radio>
                                            <Radio label="列表查询" title="返回列表记录（list）"></Radio>
                                            <Radio label="创建记录" title="执行 SQL INSERT 操作新增一笔记录（CREATE）。"></Radio>
                                            <Radio label="修改记录" title="指定记录 id，修改记录字段（UPDATE）。"></Radio>
                                            <Radio label="删除记录" title="删除单笔记录，若成功返回 true。"></Radio>
                                        </Radio-Group>

                                        <div style="margin:20px 0">



                                            <!--         &nbsp;&nbsp;&nbsp;
                                            <label>
                                                <input type="checkbox" :value="true" /> 当有 id 参数时采用“修改”的规则
                                                <tips text="CreateOrSave，同一个接口处理"></tips>
                                            </label> -->
                                            <br />
                                            <br />
                                            <Divider style="color:gray" size="small">API 接口</Divider>

                                            <api></api>
                                        </div>
                                    </div>
                                    </label>
                                </div>
                            </div>
                        </tab-pane>
                    </Tabs>
                </div>

                <div class="status-bar">Sss</div>
            </div>
        </Split>

        <Modal title="数据源配置" v-model="dataSource.isShowDataSource" ok-text="关闭" cancel-text="" width="900">
            <Datasource @change_datasource="changeDatasource"></Datasource>
        </Modal>

        <Modal title="编辑项目" v-model="project.isShowEditProjectWin" ok-text="保存" @on-ok="saveProject" cancel-text=""
            width="600">
            <i-Form ref="editForm" :model="project.form.data" :rules="project.form.rules" :label-width="120"
                style="margin-right:100px">
                <form-item label="项目名称" prop="name">
                    <i-Input v-model="project.form.data.name" placeholder="项目名称" />
                </form-item>
                <form-item label="项目简介" prop="content">
                    <i-Input type="textarea" :autosize="{minRows: 2,maxRows: 5}" v-model="project.form.data.content" />
                </form-item>
            </i-Form>
        </Modal>

        <Modal title="从数据库的表定义选择" v-model="isShowSelectTable" ok-text="保存" cancel-text="" width="900">
            <!--选择表格-->
            <table-selector :dsid="1" :is-cross-db="dataSource.crossDb"
                :data-source-id="dataSource.id"></table-selector>
        </Modal>
    </div>


    <script src="config.js"></script>
    <script src="js/project.js"></script>
    <script src="js/tree.js"></script>
    <script src="js/api.js"> </script>
    <script src="js/main.js"> </script>
</body>

</html>